<!--
 * @Author: shaoyuan
 * @Date: 2024-04-09 17:06:58
 * @Description: 
-->
<template>
  <div :class="[prefixCls]">
    <LayoutHeader v-if="isShowHeader" :headerConfig="headerConfig" />
    <div :class="getPrefixCls">
      <LayoutSideBar v-if="!isHorizontal && isShowMenu" />
      <div :class="`${prefixCls}-main`">
        <LayoutMultipleHeader v-if="isShowMultipleTab" />
        <LayoutContent />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, unref } from 'vue';
import { MenuModeEnum } from '@/enums/menu-enum';
import LayoutHeader from './header/index.vue';
import LayoutSideBar from './side/index.vue';
import { getGlobalCls } from '@/utils/index';
import LayoutMultipleHeader from './header/multiple-header.vue';
import LayoutContent from './content/index.vue';
import { useAppStore } from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user';
import { usePermissionStore } from '@/store/modules/permission';
import { updateRootCss } from '@/utils/index';
import { themeConfig } from '@/config/theme';
import { getPageConfig } from './utils';
const { prefixCls } = getGlobalCls('container');
const appStore = useAppStore();
const userStore = useUserStore();
const permissionStore = usePermissionStore();
const headerConfig = ref({
  baseStyle: {},
  titleStyle: {}
});

const isShowHeader = computed(() => appStore.getHeaderSetting.show);

const isShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show);

const isShowMenu = computed(() => appStore.getMenuSetting.show);

const mode = computed(() => appStore.getMenuSetting.mode);

const isHorizontal = computed(() => {
  return unref(mode) === MenuModeEnum.HORIZONTAL;
});

const getPrefixCls = computed(() => {
  return [`${prefixCls}-out`, !isShowHeader.value && `${prefixCls}__no-header`];
});

// 初始化页面
const initLayoutConfig = (layoutConfig: any) => {
  const { config } = layoutConfig;
  const {
    headerConfig: currentHeaderConfig,
    menuStyle: currentMenuConfig,
    rootCss
  } = getPageConfig(config) as any;
  console.log(currentMenuConfig);
  headerConfig.value = currentHeaderConfig;
  const isShowHeader = !!currentMenuConfig.mode;
  updateRootCss(rootCss);
  const settingConfig = {
    multiTabsSetting: {
      show: true
    },
    headerSetting: {
      show: isShowHeader
    },
    showBreadCrumb: true,
    menuSetting: {
      collapsed: false,
      mode: currentMenuConfig.mode,
      show: isShowHeader
    }
  };
  appStore.setProjectConfig(settingConfig);
};
onMounted(() => {
  // const appStore = useAppStore();
  initLayoutConfig(themeConfig || {});
  // userStore.getUserInfoAction();
  // permissionStore.getMenuData();
});
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-container;

  .#{$prefix-cls} {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--content-bg);
    position: relative;

  &-main {
    width: 100%;
    margin-left: 1px;
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
  }
}

  .#{$prefix-cls}-out {
    display: flex;
    flex-direction: row;
    min-height: calc(100% - config.$header-height);
    // 隐藏头部
    &.#{$prefix-cls}__no-header {
      min-height: calc(100%);
    }
    .#{$prefix-cls} {
      &-main {
        box-sizing: border-box;
        margin-left: 1px;
        min-width: 0;
      }
    }
  }
</style>
